<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('拼票预测')" />
    <th:block th:include="include :: list-css" />
    <style type="text/css">
        tr img{width: 30px !important;height: 30px !important;margin: 0 2px;}
        .ishide{display: none;}
        .bagimg{z-index: 999;max-width:200px;border: 5px solid #23b971}
    </style>
</head>
<body class="no-skin1">
<div class="ishide"><img class="bagimg" src=""/></div>
<form class="layui-form head-form">
    <div style="width: 100%;height: 10px;background: #f6f6f6;"></div>
    <div>
        <table class="layui-hide" id="mjdhtable1" lay-filter="mjtable1"></table>
        <script type="text/html" id="zjtoolbar1">
            <div style="padding: 16px;display: flex;justify-content: space-between;">
                <div  style="font-weight: 700;font-size: 18px;">拼票预测</div>
            </div>
        </script>
    </div>
    <div>
        <table class="layui-hide" id="zjdhtable" lay-filter="zjtable"></table>
        <script type="text/html" id="jptoolbar">
            <div style="padding: 16px;display: flex;justify-content: space-between;">
                <div style="font-weight: 700;font-size: 18px;">商品列表</div>
            </div>
        </script>
    </div>
</form>



<script th:inline="javascript">
	/*<![CDATA[*/
	var infoItems=[[${infoItems}]];
	var infoMap=[[${infoMap}]];
	var infoMap=infoMap ?[infoMap]:[]
	var infoItems=infoItems ?infoItems:[]
	var tablecol1=[ [
        {field: 'img', title: '图片', width:150, align:'center', templet:function (d) {
                return '<img  src="'+d.img+'"/>'}}
        ,{align: 'center',field: 'commodityCode', title: '商品编码', width: 150}
        ,{align: 'center',field: 'name', title: '商品名称', width: 180}
		,{align: 'center',field: 'nameGoodsCn', title: '商品品名(中文)', width: 150}
		,{align: 'center',field: 'nameMaterialCn', title: '商品材质(中文)', width: 150}
    ]]

    var tablecol2=[ [
        {align: 'center',field: 'weightReal', title: '实重', width: 130}
        ,{align: 'center',field: 'weightVol', title: '抛重', width: 130}
        ,{align: 'center',field: 'numBox', title: '箱数', width: 130}
        ,{align: 'center',field: 'numProName', title: '品名数', width: 130}
        ,{align: 'center',field: 'jettisonCoe', title: '抛货系数', width: 130}
        ,{align: 'center',field: 'aveBoxWeight', title: '平均箱重', width: 130}
    ]]




	var $,layer,form,table,nid,noTable;
    layui.use(['laydate','form','layer','jquery','util','element','upload','table'], function () {
		$ = layui.$, layer = layui.layer, form = layui.form, laydate = layui.laydate, util = layui.util, element = layui.element, upload = layui.upload, table = layui.table;


        // 初始化表格
        $.tablelist.init({
            elem: '#mjdhtable1'
            , data: infoMap
            , page: false
            , even: true
            , limit: 10000
            , totalRow: false
            , cols: tablecol2
            , toolbar: '#zjtoolbar1'
            , height: '200'
            , done: function (res, curr, count) {
            }
        });

        // 初始化表格
        $.tablelist.init({
            elem: '#zjdhtable'
            , data: infoItems
            , page: false
            , even: true
            , limit: 10000
            , totalRow: false
            , cols: tablecol1
            , toolbar: '#jptoolbar'
            , height: '320'
            , done: function (res, curr, count) {
                firstimg1();
            }
        });
	})

    //图片放大
    function firstimg1() {
        $("body img").mouseenter(function () {
            debugger
            var aimgurl = $(this).attr('src')
            $('.ishide').show()
            $('.bagimg').css({position: 'absolute', top: $(this).offset().top-150, left: $(this).offset().left + 32})
            $('.bagimg').attr('src', aimgurl)

        });
        $("body img").mouseleave(function () {
            $('.ishide').hide()
        });
    }



</script>

</body>
</html>